<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<title>苏宁</title>
		<style type="text/css">
		a {
			text-decoration: none;
			color: black;
		}
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.top-container {
			margin: 0 auto;
			width: 100%;
			height: 2.4rem;
			background-color: #EE739C;
			display: flex;
			flex-direction: column;
		}
		.class-login-container {
			margin: 0.026666rem 0.453333rem;
			height: 1.173333rem;
			display: flex;
			justify-content: space-between;
			/* background-color: purple; */
			align-items: center;
		}
		.class-login-container a {
			width: 0.48rem;
			height: 0.8rem;
			background-size: 0.48rem 0.8rem;
		}
		.class-login-container a:nth-child(2) {
			background: url(img/157199321817918653.png) no-repeat;
			background-size: 0.48rem 0.8rem;
		}
		.class-login-container a:nth-child(1) {
			background: url(img/157199320847433454.png) no-repeat;
			background-size: 0.48rem 0.8rem;
		}
		.search {
			margin: 0 0.32rem;
			height: 1.226666rem;
			border: 0.013333rem solid #EE739C;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0.026666rem 0;
			position: relative;
		}
		.search a {
			/* position: absolute; */
			background-color: white;
			flex: 1;
			height: .906666rem;
			margin: 0.026666rem 0;
			border-radius: 0.586666rem;
			text-indent: .906666rem;
			line-height: .906666rem;
			font-size: 0.426666rem;
		}
		.search a::before{
			position: absolute;
			top: 0.4rem;
			left: 0.24rem;
			content: "";
			display: block;
			   background-image: url(…5AsX0XACP/2Z6ypT/pKhbqsyR2JPoKAAWe9JIE+CadfAZDI9Qzc39rMQAAAABJRU5ErkJggg==);
			background: url();
			width: 0.48rem;
			height: 0.48rem;
			/* background-color: #000000; */
			background-size: 0.48rem 0.48rem;
			
			}
			
		.barner {
			/* margin-top: 0.133333rem; */
			background: url(img/158530488810675838.png) no-repeat;
			background-size: 10rem 3.466666rem;
			width: 10rem;
			height: 3.466666rem;
			padding: 0;
			/* padding: 0 0.32rem; */
		}
		.barner ul {
			padding: 0 0.32rem;
		}
		.barner ul li {
			width: 9.386666rem;
			height: 3.466666rem;
			background: url(img/158530502250696549.jpg) no-repeat;
			background-size: 9.68rem 3.466666rem;
			border-radius: 0.133333rem;
			
		}
		.yuding {
			display: flex;
			flex-direction: row;
			width: 10rem;
			height: 2.8rem;
		}
		.yuding img {
			/* flex: 1; */
			flex: 1;
			width: 100%;
			height: 2.8rem;
			background-size: 3.333333rem 2.8rem;
		}
		.yuding img:nth-child(1) {
			/* flex: 1; */
			/* flex: 1;
			width: 3.333333rem;
			height: 2.8rem; */
			background: url(img/158530514320155962.png) no-repeat;
			background-size: 3.333333rem 2.8rem;
		}
		.yuding img:nth-child(2) {
			/* flex: 1; */
			/* flex: 1; */
			background: url(img/158530517014992251.png) no-repeat;
			background-size: 3.333333rem 2.8rem;
		}
		.yuding img:nth-child(3) {
			/* flex: 1; */
			/* flex: 1; */
			background: url(img/158531473611323267.png) no-repeat;
			background-size: 3.333333rem 2.8rem;
		}
		.class-item {
			width: 10rem;
			height: 4.106666rem;
			/* display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap; */
		}
		.class-item ul {
			width: 10rem;
			height: 4.106666rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.class-item ul li {
			/* box-sizing: border-box; */
			height: 2.053333rem;
			flex: 20%;
			/* border: 0.013333rem solid #EE739C; */
			
			
		}
		.class-item ul a {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			/* align-content: center; */
		}
		.icon {
			width: 1.12rem;
			height: auto;
			margin: 0.133333rem 0.133333rem;
		}
		.class-item ul li span{
			font-size: 0.266666rem;
			color: darkblue;
		}
		</style>
	</head>
	<body>
		<div class="top-container">
			<div class="class-login-container">
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
			</div>
			<div class="search">
				<a href="javascript:void(0);">家电家装节每千减百</a>
			</div>
		</div>
		<div class="barner">
			<ul>
				<li></li>
			</ul>
		</div>
		<div class="yuding">
			<img src="" alt="">
			<img src="" alt="">
			<img src="" alt="">
		</div>
		<div class="class-item">
			<ul>
				<li><a href=""><img class="icon" src="img/158225110605546246.webp" alt=""><span>苏宁超市</span></a></li>
				<li><a href=""><img class="icon" src="img/158225110605546246.webp" alt=""><span>苏宁超市</span></a></li><li><a href=""><img class="icon" src="img/158225110605546246.webp" alt=""><span>苏宁超市</span></a></li><li><a href=""><img class="icon" src="img/158225110605546246.webp" alt=""><span>苏宁超市</span></a></li><li><a href=""><img class="icon" src="img/158225110605546246.webp" alt=""><span>苏宁超市</span></a></li><li><a href=""><img class="icon" src="img/158225110605546246.webp" alt=""><span>苏宁超市</span></a></li><li><a href=""><img class="icon" src="img/158225110605546246.webp" alt=""><span>苏宁超市</span></a></li><li><a href=""><img class="icon" src="img/158225110605546246.webp" alt=""><span>苏宁超市</span></a></li><li><a href=""><img class="icon" src="img/158225110605546246.webp" alt=""><span>苏宁超市</span></a></li><li><a href=""><img class="icon" src="img/158225110605546246.webp" alt=""><span>苏宁超市</span></a></li>
			</ul>
		</div>
	</body>
</html>
